<template>
	<view class="page">
		<comHead ref="comHeadRef" id="comHeadRef" :datas="datasObj">
			<template  #headerContent>
				<view class="clinch flex-center">
					<view class="cate" :class="{active:tabIndex==0}" @click="selectTab(0)">最近成交</view>
					<view class="line"></view>
					<view class="cate" :class="{active:tabIndex==1}" @click="selectTab(1)">成功案例</view>
				</view>
			</template>
		</comHead>
		<!-- <view style="height: 88rpx;"></view> -->
		<view class="wh-100 pd-30" v-if="tabIndex === 0">
			<view class="deal-list">
				<view class="deal-item" v-for="(item, index) in dealList" :key="index"  @tap.stop="goProjectDetail(item.product_id)">
					<view class="ft fw-800 c-33">{{ item.time_str }}</view>
					<view class="flex mt-10" style="align-items: stretch;justify-content: space-between;">
						<view class="l">
							<view class="radius"></view>
							<view class="line"></view>
						</view>
						<view style="padding-bottom: 50rpx;">
							<view class="card pd-20 ft">
								<text class="new mr-12">New</text>
								<text class="ft">{{ item.msg }}</text>
								<view class="card1 pd-20 mt-20">
									<view class="flex-start">
										<view class="ft c-bbq" v-for="(tag,index) in item.product_info?.tags"
											:key="index" @tap.stop="goTip(tag.id)">#{{ tag.name }}</view>
									</view>
									<view class="ft c-99 mt-12">{{ "订购商品：" }}</view>
									<view class="flex-bwt mt-12">
										<text class="ft1 ft-lue" style="width: 360rpx;">{{ item.product_info?.name }}</text>
										<view class="btn flex-center">
											<text class="ft">查看商品</text>
											<image class="wh-24 ml-12"
												src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="com-empty" v-if="dealList.length==0">暂无数据</view>
		</view>
		<view v-if="tabIndex === 1">
			<view class="case pd-30">
				<view class="caseItem pd-20" v-for="(item,index) in caseList" :key="item.id">
					<view class="flex-start">
						<view @click="goTip(tag.id)" class="ft c-bbq" v-for="tag in item.product_info?.tags"
							:key="tag.id">
							#{{ tag.name }}
						</view>
					</view>

					<view class="ft mt-20 c-99">
						{{ "订购商品：" }}
					</view>
					<view class="flex-bwt pb-20" style="border-bottom: 2rpx #f1f1f1 solid">
						<text class="ft1 ft-lue" style="width: 360rpx;">{{ item.product_info?.name }}</text>
						<view class="detail flex-center ft" @click="goProjectDetail(item.product_id)">
							<text class="ft mr-8">{{ "查看商品" }}</text>
							<image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png">
							</image>
						</view>
					</view>
					<view class="flex ft mt-20 c-99" style="align-items: flex-start;">
						<view style="flex-shrink: 0;">订购时间：</view><view class="ft c-33">{{ item.order_time }}</view>
					</view>
					<view class="flex ft mt-20 c-99" style="align-items: flex-start;">
						<view style="flex-shrink: 0;">交付时间：</view><view class="ft c-33">{{ item.deliver_time }}</view>
					</view>
					<view class="flex ft mt-20 c-99" style="align-items: flex-start;">
						<view style="flex-shrink: 0;">办理结果：</view><view class="ft c-33">{{ item.handle_result}}</view>
					</view>
					<view class="flex ft mt-20 c-99" style="align-items: flex-start;">
						<view style="flex-shrink: 0;">办理周期：</view><view class="ft c-33">{{ item.handle_cycle }}</view>
					</view>
					<view class="flex ft mt-20 c-99" style="align-items: flex-start;">
						<view style="flex-shrink: 0;">客户条件：</view><view class="ft c-33">{{(item.customer_condition.substring(0,20)+(item.customer_condition.length>20?'...':'')) }}</view>
					</view>
					<template v-if="item.images && item.images.length>0">
						<view class="ft mt-20 c-99">
							{{ "案例图片：" }}
						</view>
						<view class="imgGroup flex mt-20 " style="width: 650rpx;overflow: hidden;position: relative;">
							<view class="group" v-for="(img,index) in item.images" :key="index" @click="handlePreview(index,item.images)">
								<image  class="wh-100" mode="aspectFill" :src="img"></image>
								<view class="img-count flex-center">{{item.images.length}}</view>
							</view>						
						</view>
					</template>				
					
					<view class="watch flex-center" @click="goDetail(item.id)">
						<text class="ft">查看详情</text>
						<image class="wh-24 ml-8" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png">
						</image>
					</view>
				</view>
			</view>
			<view class="com-empty" v-if="caseList.length==0">暂无数据</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		reactive,
		nextTick
	} from "vue";
	import {
		utils
	} from '@/utils/utils.js';
	import {
		api
	} from '@/utils/api.js';
	import {
		onLaunch,
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	import comHead from '@/components/comHead.vue'
	
	let contentTop = ref(0)
	nextTick(() => {
		const query = uni.createSelectorQuery();
		// 获取元素的高度
		query.select('#comHeadRef').boundingClientRect(data => {			 
			contentTop = data.height
		}).exec();
	})
	let datasObj = reactive({
		title: '最近成交',
		img: '',
		color: `#fff`,
		isImg: false,
		isColor: true,
		direction: '',
		scrollTop: 0,
		height: 176,//88导航头+头部固定高度
	})
	

	const tabIndex = ref(0)
	const selectTab = (id)=>{
		tabIndex.value = id
		if(id==0){
			getDealListData();
		}else if(id==1){
			getDealCaseListData();
		}
	}
	
	onReachBottom(() => {
		if (tabIndex.value === 0 && dealLoading.value) {
			getDealListData()
		} else if (tabIndex.value === 1 && caseLoading.value) {
			getDealCaseListData()
		}
	})
	
	
	//最近成交
	const dealPage = ref(1)
	const dealList = ref([])
	const dealLoading = ref(true)
	const getDealListData = () => {
		if (!dealLoading.value) {
			return
		}
		uni.showLoading()
		dealLoading.value = false
		utils
			.request(
				api.getDealList, {
					page: dealPage.value,
					pageSize: 5
				},
				"get"
			)
			.then((res) => {
				dealPage.value++
				if (res.data.items.length > 0) {
					dealList.value = dealList.value.concat(res.data.items)
				}
				if (dealPage.value <= res.data.pageInfo.totalPage) {
					dealLoading.value = true
				}
				uni.hideLoading()
			});
	};
	
	//成功案例
	const casePage = ref(1)
	const caseList = ref([])
	const caseLoading = ref(true)
	const getDealCaseListData = () => {
		if (!caseLoading.value) {
			return
		}
		uni.showLoading()
		caseLoading.value = false
		utils
			.request(
				api.getDealCaseList, {
					page: casePage.value,
					pageSize: 5
				},
				"get"
			)
			.then((res) => {
				casePage.value++
				if (res.data.items.length > 0) {
					caseList.value = caseList.value.concat(res.data.items)
				}
				if (casePage.value <= res.data.pageInfo.totalPage) {
					caseLoading.value = true
				}
				uni.hideLoading()
			});
	};


	const goDetail = (id) => {
		uni.navigateTo({
			url: `/subpackage/clinch/clinchDetail?id=${id}`,
		});
	};

	const goProjectDetail = (id)=>{
		uni.navigateTo({
			url: `/subpackage/immigration/immigration?id=${id}`,
		});
	}

	const goTip = (tigId) => {
		uni.navigateTo({
			url: `/subpackage/clinch/tipSearch?tigId=${tigId}`,
		});
	}
	const scrollTop = ref(0);
	const upper = (e) => {
		//console.log(e)
	};
	const lower = (e) => {
		// console.log(e)
	};
	const scroll = (e) => {
		//console.log(e)
	};

	const statusBarHeight = ref(0)
	onLoad(() => {
		const systemInfo = uni.getSystemInfoSync();
		console.log(systemInfo,444444)
		// statusBarHeight.value = systemInfo.statusBarHeight;
		getDealListData();
	})
	
	const handlePreview = (index,imgList = []) => {
		uni.previewImage({
			current: index,
			urls: imgList
		});
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		overflow-x: hidden;
	}

	.clinch {
		// position: fixed;
		// top:0;
		// left:0;
		// width: 100vw;
		box-shadow: 0rpx 2rpx 2rpx 2rpx rgba(0,0,0,0.05);
		// height: 88rpx;
		background-color: #ffffff;
		// z-index: 1;
		height: 88rpx;
		.cate{
			width:374rpx;
			text-align: center;
			font-size: 28rpx;
			color: #999999;
		}
		.cate.active{
			font-weight: 800;
			color: #333333;
		}
		.line{
			width: 2rpx;
			height: 28rpx;
			background-color: #F1F1F1;
		}
	}

	.scroll-Y {
		height: 1180rpx;
	}
	
	.deal-list{
		.deal-item{
			margin-top: 10rpx;
			.l{
				display: flex;
				flex-direction: column;
				align-items: center;
				.radius{
					width: 16rpx;
					height: 16rpx;
					background: #333333;
					border-radius: 50%;
					margin-bottom: 10rpx;
					flex-shrink: 0;
				}
				.line{
					height: 100%;
					width: 2rpx;
					background-color: #F1F1F1;
				}
			}
		}
		.deal-item:first-child{
			margin-top: 0rpx;
		}
		.deal-item:last-child{
			.line{
				display: none;
			}			
		}
	}

	.card {
		width: 654rpx;
		//height: 268rpx;
		background: #f8f8f8;
		border-radius: 40rpx;
	}

	.case {
		.caseItem {
			width: 100%;
			// height: 782rpx;
			margin-bottom: 20rpx;
			background: #f8f8f8;
			border-radius: 40rpx;
			border: 1rpx solid #f8f8f8;

			.detail {
				width: 170rpx;
				height: 54rpx;
				background: #ffffff;
				border-radius: 20rpx;
			}

			.group {
				width: 148rpx;
				height: 186rpx;
				border-radius: 40rpx;
				overflow: hidden;
				position: relative;
				flex-shrink: 0;
				margin-right: 20rpx;
				.play-icon{
					position: absolute;
					top:12rpx;
					left: 12rpx;
					width: 36rpx;
					height: 36rpx;
					z-index: 1;
				}
				.img-count{
					display: none;
				}
			}
			
			.imgGroup{
				.group:nth-child(4){
					.img-count{
						display: flex;
						width: 54rpx;
						height: 52rpx;			
						// background: #F8F8F8;
						background: rgba(248, 248, 248, 0.3);
						border-radius: 26rpx;
						font-weight: 800;
						font-size: 22rpx;
						color: #333333;
						position: absolute;
						bottom: 10rpx;
						right: 10rpx;
						z-index: 2;
						backdrop-filter: blur(30rpx);
						-webkit-backdrop-filter: blur(30rpx);
					}
				}
			}

			.watch {
				width: 650rpx;
				height: 74rpx;
				background: linear-gradient(180deg,
						rgba(255, 255, 255, 0) 0%,
						#ffffff 100%);
				border-radius: 0rpx 0rpx 40rpx 40rpx;
			}

			.avtor {
				border-radius: 50%;
			}

			.nameplate {
				width: 88rpx;
				height: 36rpx;
				background: #333333;
				border-radius: 8rpx;
				line-height: 36rpx;
			}

			.tcard {
				padding-left: 20rpx;
				padding-right: 20rpx;
				height: 58rpx;
				background: #f1f1f1;
				border-radius: 34rpx;
			}
		}
	}

	.card1 {
		width: 614rpx;
		// height: 168rpx;
		background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
		border-radius: 40rpx;

		.btn {
			width: 170rpx;
			height: 54rpx;
			background: #ffffff;
			border-radius: 20rpx;
		}
	}
</style>